<template>
  <div class="position-relative">
    <div class="d-flex">
      <div class="col p-0">
        <el-input v-model="article.title" placeholder="请输入文章标题"></el-input>
      </div>
      <el-popover placement="right" width="400" trigger="click" v-model="publishVisible">
        <p><strong>文章分类</strong></p>
        <el-select v-model="article.articleType" filterable placeholder="请选择" class="w-100">
          <el-option v-for="item in types" :key="item.id" :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <p class="mt-3"><strong>文章标签</strong></p>
        <el-select v-model="article.tag" filterable placeholder="请选择" class="w-100">
          <el-option v-for="item in options" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <p class="mt-3"><strong>文章封面大图</strong></p>
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传图片文件，且不超过2MB</div>
        </el-upload>
        <el-button class="w-100 mt-5">保存草稿</el-button>
        <el-button class="w-100 mt-3 ml-0" type="primary" @click="publish()">正式发布</el-button>
        <el-button slot="reference" icon="el-icon-document-checked">发布</el-button>
      </el-popover>
      <el-button icon="el-icon-back" @click="$router.go(-1)">返回列表</el-button>
    </div>
    <MdEditor height="calc(100vh - 40px)" v-model="article.content"/>
  </div>
</template>
<script>
import MdEditor from '@/components/MdEditor'
import api from '@/api'

export default {
  title: "文章编辑",
  components: {
    MdEditor,
  },
  data() {
    const { userId } = this.$store.state.user.user
    return {
      loading: false,
      article: {
        id: '',
        title: '',
        content: '',
        articleType: '',
        tag: '',
        userId: userId,
      },
      publishVisible: false,
      types: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
    }
  },
  created() {
    this.getAllTypes()
    const { id } = this.$route.params
    if (id) {
      this.getArticle(id)
    }
  },
  methods: {
    getAllTypes() {
      this.$get(api.type).then(res => {
        this.types = res.data.data
      })
    },
    getArticle(id) {
      this.$get(`${api.article}/${id}`).then(res => {
        console.log('res', res.data.data);
        const { id, title, content, articleType } = res.data.data
        this.article.id = id
        this.article.title = title
        this.article.content = content
        this.article.articleType = articleType
      })
    },
    publish() {
      this.loading = true
      const { id } = this.article
      let method = '$post'
      let url  = api.article
      if (id) {
        method = '$put'
        url = `${api.article}/${id}`
      }
      console.log(this.$post, method,this[method]);
      this[method](url, this.article).then(res => {
        this.publishVisible = false
        this.$message({
          message: `文章${id ? '更新' : '发布'}成功`,
          type: 'success'
        });
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>